<template>
    <div id="Zhuanbi">
        <Headers>转币</Headers>
        <div class="zhuanbixiangqing">
            <div class="address">
                <p>接收地址</p>
                <input type="text" placeholder="请输入收币的地址">
            </div>
            <div class="zhuannum">
                <div class="top">
                    <p>转币数量</p>
                    <span>可用余额：{{yuNum}}</span>
                </div>
                <div class="center">
                    <input type="text" placeholder="请输入转账数量">
                    <span>{{bizhong}}</span>
                    <img src="../../assets/more.png" alt="">
                </div>
                <div class="bottom">
                    <p>最大可转数量9.90000000</p>
                    <p>最大可转数量=可用余额 - 手术费</p>
                </div>
            </div>
            <div class="shouxufei">
                <div class="top">
                    <p>手续费</p>
                    <span>{{shouxufei}} {{bizhong}}</span>
                </div>
                <div class="bottom">
                    <div class="range">
                        <mt-range v-model="rangeValue"></mt-range>
                    </div>
                    <p>
                        <span v-for="(item,index) in jindu" :key="index" :class="isblue?'active':''" @click="showblue(index)">{{item.text}}</span>
                    </p>
                </div>
            </div>
            <div class="zhuanbi" @click="toqrzb">转币</div>
        </div>
    </div>
</template>

<script>
    import Vue from "vue";
    import Router from "vue-router";
    import { Range } from "mint-ui";
    Vue.use(Router);
    Vue.component(Range.name, Range);
    export default {
        name: 'zhuanbi',
        data() {
            return {
                yuNum:"10.00000000",
                shouxufei:"0.10000000",
                rangeValue:10,
                isblue:false,
                bizhong:"BTC",
                jindu:[
                    {
                        text:"慢",
                        isblue:false
                    },
                    {
                        text:"建议",
                        isblue:true
                    },
                    {
                        text:"快",
                        isblue:false
                    }
                ]
            }
        },
        methods: {
            toqrzb() {
                this.$router.push({ path:'/qrzb' });
            },
            showblue(x) {
                for (var i = 0; i < this.jindu.length; i++){
                    if (i == x) { this.jindu[i].isblue = true; } else {
                        this.jindu[i].isblue = false;
                    }
                }
            }
        }
    }
</script>

<style scoped lang="stylus">
@import '../../common/styl/mixin'
@import '../../common/styl/mint'
    #Zhuanbi
        margin  0
        width  rem(375)
        min-height  100vh
        overflow hidden
        display flex
        flex-direction column
        .zhuanbixiangqing
            flex 1
            margin-top rem(50)
            box-sizing border-box
            padding rem(20)
            .address
                display flex
                flex-direction column
                justify-content space-between
                height rem(71)
                p
                    color #333333
                    font-family HiraginoSansGB-W3
                    font-weight W3
                    font-size rem(15)
                input
                    width 100%
                    height rem(36)
                    background #FAFAFA
                    border none
            .zhuannum
                margin-top rem(20)
                .top
                    display flex
                    justify-content space-between
                    align-items flex-end
                    width 100%
                    height rem(15)
                    p
                        color #333333
                        font-family HiraginoSansGB-W3
                        font-weight W3
                        font-size rem(15)
                    span
                        color #999999
                        font-family HiraginoSansGB-W3
                        font-weight W3
                        font-size rem(11)
                .center
                    margin-top rem(10)
                    width 100%
                    height rem(36)
                    display flex
                    justify-content space-between
                    align-items center
                    input
                        background #FAFAFA
                        border none
                        width rem(284)
                        height 100%
                    span
                        color #333333
                        font-family HiraginoSansGB-W3
                        font-weight W3
                        font-size rem(13)
                    img
                       width rem(9)
                .bottom
                    margin-top rem(28)
                    height rem(42)
                    display flex
                    flex-direction column
                    justify-content space-between
                    color #666666
                    font-family HiraginoSansGB-W3
                    font-weight W3
                    font-size rem(13)
            .shouxufei
                margin-top rem(32)
                .top
                    display flex
                    justify-content space-between
                    align-items flex-end
                    width 100%
                    height rem(15)
                    p
                        color #333333
                        font-family HiraginoSansGB-W3
                        font-weight W3
                        font-size rem(15)
                    span
                        color #666666
                        font-family HiraginoSansGB-W3
                        font-weight W3
                        font-size rem(11)
                .bottom
                    margin-top rem(30)
                    .range
                        width 100%
                        height rem(10)
                        background #7BA6D1
                    p
                        margin-top rem(9)
                        display flex
                        justify-content space-between
                        color #333333
                        font-family HiraginoSansGB-W3
                        font-weight W3
                        font-size rem(13)
                        span.active
                            color #8CAFD5
            .zhuanbi
                margin rem(102) auto 0
                width rem(190)
                height (41)
                border-radius rem(18)
                background #8CAFD5
                line-height rem(41)
                text-align center
                font-family HiraginoSansGB-W3
                font-weight W3
                font-size rem(15)
                color #FFFFFF
</style>
